<template>
  <uni-popup ref="popup" type="center" style="z-index: 910">
    <view class="pop column">
      <view class="center top">
        <image :src="avatar" mode=""></image>
        <view>{{nickname}}</view>
      </view>
      <image :src="images" mode="" style="width: 318rpx;height: 318rpx;margin: 20rpx 0px;"></image>
      <view>长按保存二维码</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const popup = ref(null)
  const avatar = ref('')
  const nickname = ref('')
  const images = ref('')
  function shares(avat : string, name : string, image : string) {
    avatar.value = avat
    nickname.value = name
    images.value = image
    popup.value.open();
  }
  defineExpose({
    shares
  });
</script>

<style scoped lang="less">
  .pop {
    width: 600rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;

    .top {
      width: 100%;

      image {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }
</style>